
import React, { Component } from 'react';
import { connect } from 'react-redux'  
import { Modal, Button,Popover } from 'antd';
import { baseUrl,imgUrl } from '../../config/system';

class RackInfoModal extends Component {

    constructor(props) {
        super(props);
    }

    componentDidMount() {

        

    }

    render() {
        const { children, itemList } = this.props;
        var modalWidth = itemList.length*310;
        if(modalWidth>1500){
            modalWidth=1500;
        }
        var modalDiv1Width = itemList.length*290;
        if(modalDiv1Width>1470){
            modalDiv1Width=1470+'px';
        }
        var modalDiv2Width = itemList.length*300;
        if(modalDiv2Width>1890){
            modalDiv2Width=1890+'px';
        }
        function setlitable(list){
//        	alert(JSON.stringify(list));
            var list2 = list&&list.length?list.map((d,index)=>{
                var addCount=0,domlist = [],insign=0,srr=d.assetList;
                if(srr && srr.length){
                    for(;;){
                        if(srr.length > insign && addCount<d.uHeight){
                        	if(srr[insign].startU==0 || srr[insign].uHeight==0){
//                        		domlist.push((<tr key={addCount} id={addCount}><td></td></tr>));
//                                addCount+=1;
                                insign+=1; 
                        		continue;
                        	}
                            if(addCount!=srr[insign].startU+srr[insign].uHeight-2){
                                domlist.push((<tr key={addCount} id={addCount}><td></td></tr>));
                                addCount+=1;
                            }else{
                                var curr = srr[insign];
                                var rowSpan = curr.uHeight;
                                var height = 20*curr.uHeight;
                                var content = (
                                    <div>
                                        <p>设备名称:{curr.assetName}</p>
                                        <p>资产编号:{curr.assetNo}</p>
                                        <p>设备序列号:{curr.serialNo}</p>
                                        <p>设备RFID:{curr.rfidNo}</p>
                                        <p>所在U高:{curr.uHeight}</p>
                                        <p>起始U:{curr.startU}U</p>
                                    </div>
                                )
                                console.log(JSON.stringify(curr));
                                domlist.push((
                                    <tr key={addCount} id={curr.startU+"__"+d.assetId_} style={{height: 20}}>
                                        <td rowSpan={rowSpan} style={{}} >
                                            <Popover key={curr.startU+"__"+d.assetId_} content={content} title="设备详情" trigger="hover">
                                                <img style={{width:"207px",height:height,}} src={imgUrl+"/"+curr.imgPath} />
                                            </Popover>
                                        </td>
                                    </tr>
                                ));
                                addCount+=1;
                                insign+=1;
                            }
                        }else if(addCount<d.uHeight){
                            domlist.push((<tr key={addCount} id={addCount}><td></td></tr>));
                            addCount+=1;
                        }else{
                            break;
                        }
                    }
                }
//                domlist.reverse();
                
                return  (                            
                  <Popover  key={d.assetId_} content={<div>
                            <p>设备名称:{d.assetName}</p>
                            <p>资产编号:{d.roomName}</p>
                            <p>机柜容量:{d.uHeight}U</p>
                            <p>已用容量:{d.isUserd}U</p>
                            <p>未用容量:{d.unUserd}U</p>
                            </div>} title="机柜详情" trigger="hover">
                       <li key={index} id={d.assetId_}>
                            <table><tbody>
                                {domlist}
                            </tbody></table>
                      </li>
                   </Popover>                   
                )
            }):[];
            list2.reverse();
            return list2;
        }
        // $("#ulInfo").html("");
        // if(itemList!=null&&itemList.length>0){
        //   var html="";
        //   for(var k=0;k<itemList.length;k++){
        //       var currRack =itemList[k];
        //       html='</tbody></table></li>'+html;      
        //       if(currRack.assetList){
        //         var addCount=0;
        //         for(var i=0;i<currRack.assetList.length;i++){
        //             var curr = currRack.assetList[i];
        //             var rowSpan = curr.uHeight;
        //             var height = 20*curr.uHeight;
        //             var bb =curr.startU+rowSpan-2-addCount;
        //             if(bb){
        //                 for(var j=0;j<bb;j++){
        //                     html='<tr><td></td></tr>'+html;
        //                 }
        //             }
        //             html='<tr stat="'+curr.startU+'"><td rowSpan="'+rowSpan+'"><img style="width:207px;height:'+height+'px" src="server/1.jpg" /></td></tr>'+html;
        //             addCount+=bb+1;
        //          }  
        //          var diff = currRack.uHeight-addCount;
        //          if(diff>0){
        //             for(var j=0;j<diff;j++){
        //                 html='<tr><td></td></tr>'+html;
        //             }
        //          }    
                       
        //     }
        //     html ='<li id="'+currRack.assetId_+'"><table><tbody>'+html; 
        //   }  
        //   $("#ulInfo").append(html);
        // }
        
		
        return (
            <Modal
                maskClosable= {this.props.maskClosable}
                style={{ top: 10}}
                width={ modalWidth }
                title={this.props.title}
                visible={this.props.visible}
                onCancel={this.props.onCancel}
                footer={[
                    <Button key="back" size="large" onClick={this.props.onCancel}>关闭</Button>,
                ]}
            >
            <div className="rackinfo" style={{height:'800px',overflow:'auto',paddingTop:'1px',width:modalDiv1Width}}>
                <div style={{width:modalDiv2Width}}>
                <ul id="ulInfo">
                    {setlitable(itemList)}
                    {/*<li>
                        <table className="rack">
                          <tbody id="rackInfo">
                            <tr><td></td></tr>
                            <tr><td></td></tr>
                            <tr><td rowSpan="2"><img style={{width:'207px',height:'40px'}} src="server/2.jpg" /></td></tr>
                            <tr><td></td></tr>
                            <tr><td rowSpan="2"><img style={{width:'207px',height:'40px'}} src="server/2.jpg" /></td></tr>
                            <tr><td></td></tr>
                            <tr><td rowSpan="10"><img style={{width:'207px',height:'200px'}} src="server/3.jpg" /></td></tr>
                            <tr><td></td></tr>
                            <tr><td></td></tr>
                            <tr><td></td></tr>
                            <tr><td></td></tr>
                            <tr><td></td></tr>
                            <tr><td></td></tr>
                            <tr><td></td></tr>
                            <tr><td></td></tr>
                            <tr><td></td></tr>
                            <tr><td rowSpan="2"><img style={{width:'207px',height:'40px'}} src="server/2.jpg" /></td></tr>
                            <tr><td></td></tr>
                            <tr><td rowSpan="2"><img style={{width:'207px',height:'40px'}} src="server/2.jpg" /></td></tr>
                            <tr><td></td></tr>
                            <tr><td rowSpan="2"><img style={{width:'207px',height:'40px'}} src="server/1.jpg" /></td></tr>
                            <tr><td></td></tr>
                            <tr><td rowSpan="2"><img style={{width:'207px',height:'40px'}} src="server/2.jpg" /></td></tr>
                            <tr><td></td></tr>
                            <tr><td rowSpan="2"><img style={{width:'207px',height:'40px'}} src="server/2.jpg" /></td></tr>
                            <tr><td></td></tr>
                            <tr><td rowSpan="2"><img style={{width:'207px',height:'40px'}} src="server/2.jpg" /></td></tr>
                            <tr><td></td></tr>
                            <tr><td rowSpan="2"><img style={{width:'207px',height:'40px'}} src="server/2.jpg" /></td></tr>
                            <tr><td></td></tr>
                            <tr><td rowSpan="2"><img style={{width:'207px',height:'40px'}} src="server/1.jpg" /></td></tr>
                            <tr><td></td></tr>
                            <tr><td rowSpan="2"><img style={{width:'207px',height:'40px'}} src="server/2.jpg" /></td></tr>
                            <tr><td></td></tr>
                            <tr><td rowSpan="2"><img style={{width:'207px',height:'40px'}} src="server/2.jpg" /></td></tr>
                            <tr><td></td></tr>
                            <tr><td rowSpan="2"><img style={{width:'207px',height:'40px'}} src="server/2.jpg" /></td></tr>
                            <tr><td></td></tr>
                            <tr><td rowSpan="2"><img style={{width:'207px',height:'40px'}} src="server/2.jpg" /></td></tr>
                            <tr><td></td></tr>
                            <tr><td rowSpan="2"><img style={{width:'207px',height:'40px'}} src="server/1.jpg" /></td></tr>
                            <tr><td></td></tr>
                            <tr><td></td></tr>
                            <tr><td></td></tr> 
                            
                            </tbody>
                        </table>
                    </li> */}
                   
                </ul>
                </div>
            </div>
            </Modal>

        );
    }

}
export default RackInfoModal
